{extend name='public/layer_base' /}
{block name='content'}
<style>
    .layui-icon-file:before {
        content: "\e623";
    }

    .add-border {
        border: 2px solid #1E9FFF;
    }

    .white-border {
        border: 2px solid #ffffff;
    }

    .img-box {
        border-left: 1px solid #1E9FFF;
        margin-top: 10px
    }

    .img-border {
        width: 130px;
        height: 130px;
        box-sizing: border-box;
        padding: 5px;
    }

    .img-lists {
        margin-bottom: 15px
    }

    .used-btn {
        padding: 10px
    }
</style>
<div class="layui-card-body ">
    <button type="button" class="layui-hide" id="test1"></button>
    <div style="width: 20%; float: left;">
        <div id="cate"></div>
    </div>
    <div id="fileManager" lay-filter="test" style="width: 78%;float: left;">

        <div style="padding:10px">
            <button id="add-cate" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe61f;</i>添加分类
            </button>
            <button id="upload" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <button id="delImg" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-left: 10px"><i
                    class="layui-icon">&#xe640;</i>删除图片
            </button>
        </div>

        <ul id="lists" class="layui-row fm_body layui-col-space10 img-lists"></ul>
        <hr class="layui-bg-blue">

        <div class="layui-col-sm10">
            <div id="page"></div>
        </div>

    </div>
</div>
<script>
    layui.use(['fileManager', 'layer', 'upload', 'tree', 'laypage', 'flow'], function () {
        var fileManager = layui.fileManager,
            $ = layui.$,
            upload = layui.upload,
            layer = layui.layer,
            tree = layui.tree,
            laypage = layui.laypage,
            flow = layui.flow,
            update_count = 0,
            update_count_ed = 0,
            cate = 1,
            ids = [], //选中的id
            paths = [], //选中的路径
            count;
        $('#lists').height($(document).height() - 150);
        limit = parseInt($('#lists').height() / 134) * parseInt($('#lists').width() / 140);
        //---------------获取数据-------------------//
        function getLists(page, cate = 1) {
            let count = 0;
            $.ajax({
                url: '{:url("filemanage/list")}?cate=' + cate,
                data: {
                    type: 1,
                    page: page,
                    limit: limit
                },
                async: false,
                type: 'post',
                success: function (res) {
                    var html = '';
                    lists = res.data.data;
                    if (lists.length == 0) {
                        html += '<div>暂无图片</div>'
                    }
                    for (var i in lists) {
                        html +=
                            '<li class="manage_img" style="display:inline-block"> <div align="center" class="white-border img-border"> <img  class="manage_img_find" data-id="' +
                            lists[i]['id'] + '" value="' + lists[i]['url'] + '" lay-src="' +
                            lists[i]['url'] + '" alt="' + lists[i]['original_name'] +
                            '" width="100" height="100"> <p class="layui-elip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width: 100px">' +
                            lists[i]['original_name'] + ' </p> </div> </li>';
                    }

                    $('#lists').html(html);
                    flow.lazyimg();
                    count = res.data.count;

                }
            });
            return count;

        }
        count = getLists(1, 1);
        laypage.render({
            theme: '#1E9FFF',
            elem: 'page',
            count: count,
            limit: limit,
            skin: '#1E9FFF',
            prev: '<',
            next: '>',
            skip: true,
            jump: function (obj, first) {
                getLists(obj.curr, cate);
                ids = [];
                paths = [];
            }
        });

        //---------------获取数据end-------------------//
        //---------点击事件 ------------//

        $(document).on('click', '.manage_img', function () {
            if ($(this).hasClass('add-border')) {
                $(this).removeClass('add-border');
            } else {
                $(this).addClass('add-border');
            }
            //选中的图片的id
            let img = $(this).find('.manage_img_find');
            let choose_id = img.data('id');
            var id_exist = $.inArray(choose_id, ids);
            if (id_exist >= 0) {
                ids.splice(id_exist, 1);
            } else {
                ids.push(choose_id);
            }
            //选中的图片的路径
            var choose_path = img.attr('value');
            var path_exist = $.inArray(choose_path, paths);
            if (path_exist >= 0) {
                paths.splice(path_exist, 1);
            } else {
                paths.push(choose_path);
            }
        });
        $(document).on('dblclick', '.manage_img', function () {
            let img = $(this).find('.manage_img_find');

            var src = img.attr('src'),
                alt = img.attr('alt');
            var photos = {
                "id": Math.random(),
                "data": [{
                    "alt": alt,
                    "pid": Math.random(),
                    "src": src,
                    "thumb": src
                }]
            };
            layer.photos({
                photos: photos,
                anim: 5
            });
            return false;
        })

        //---------点击事件end ------------//


        //-----------------------上传图片----------------------------//
        var uploadInst = upload.render({
            elem: '#upload',
            url: "{:url('Upfile/uploadImg')}",
            accept: 'images',
            exts: 'jpg|png|gif|bmp|jpeg|ico',
            data: {
                'cate': cate
            },
            number: 20,
            multiple: true,
            before: function (obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                });
            },
            choose: function (obj) {
                var count = 0;
                for (var i in obj.pushFile()) {
                    update_count++;
                };
            },
            done: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {
                        offset: '15px',
                        icon: 2,
                        time: 2500
                    }, function () {
                        update_count_ed = 0;
                        update_count = 0;
                        return;
                    });
                }
                if (res.code == 1) {
                    update_count_ed++;
                    if (update_count_ed == update_count) {
                        layer.msg(res.msg, {
                            offset: '15px',
                            icon: 1,
                            time: 2500
                        }, function () {
                            location.reload()
                        });
                    }
                    layer.closeAll("loading");
                }
            },
            error: function () {
                layer.closeAll("loading");
            }
        });
        //-----------------------上传图片end----------------------------//


        //删除选中的图片
        $('#delImg').click(function () {
            if (ids.length <= 0) {
                layer.msg('请选择图片');
                return false;
            }
            layer.confirm('确定删除选中图片吗?', function (index) {
                $.ajax({
                    url: "{:url('Filemanage/del')}",
                    data: {
                        ids: ids
                    },
                    type: "post",
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.location.reload();
                            });
                        }
                    }
                });
            });
        });

        //------------ 树形结构分类->增删改操作-----------//
        let cateData = JSON.parse('{$cate|raw}');
        var inst1 = tree.render({
            elem: '#cate',
            data: cateData,
            edit: ['update', 'del'],
            onlyIconControl: true,
            click: function (obj) {
                var id = obj.data.id;
                cate = id;

                //重载上传接口
                uploadInst.reload({
                    elem: '#upload' //绑定元素
                        ,
                    url: "{:url('Upfile/uploadImg')}",
                    accept: 'images',
                    exts: 'jpg|png|gif|bmp|jpeg|ico',
                    data: {
                        'cate': cate
                    }
                });
                count = getLists(1, id);
                laypage = layui.laypage;
                laypage.render({
                    theme: '#1E9FFF',
                    elem: 'page',
                    count: count,
                    limit: limit,
                    skin: '#1E9FFF',
                    groups: 3,
                    prev: '<',
                    next: '>',
                    skip: true, //开启跳页
                    jump: function (obj, first) {
                        getLists(obj.curr, id);
                        ids = [];
                        paths = [];
                    }
                });
            },
            operate: function (obj) {
                var type = obj.type,
                    data = obj.data,
                    id = data.id;
                if (type === 'update') { //修改节点
                    $.ajax({
                        url: '{:url("attachment_cate/edit")}',
                        data: {
                            id: id,
                            name: data.title,
                            parent_id:data.parent_id
                        },
                        type: "post",
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {
                                    offset: '15px',
                                    icon: 1,
                                    time: 1000
                                });
                            }
                        }
                    });

                } else if (type === 'del') {

                        $.ajax({
                            url: '{:url("attachment_cate/del")}',
                            data: {
                                id: id
                            },
                            type: "post",
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg(res.msg, {
                                        offset: '15px',
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        window.location.reload();
                                    });
                                }
                            }
                        });
                        layer.close(index);
                }
            }
        });

        //添加分类
        $('#add-cate').click(function () {
            layer.open({
                type: 2,
                title: '添加分类',
                content: '{:url("attachment_cate/add")}',
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index],
                        submit = layero.find('iframe').contents().find(
                            "#add-cate-submit");

                    //监听提交
                    iframeWindow.layui.form.on('submit(add-cate-submit)', function (
                        data) {
                        var field = data.field; //获取提交的字段
                        console.log(field);
                        $.ajax({
                            url: '{:url("attachment_cate/add")}',
                            data: field,
                            type: "post",
                            success: function (res) {
                                if (res.code == 1) {
                                    layui.layer.msg(res.msg, {
                                        offset: '15px',
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        window.location
                                            .reload();
                                    });
                                    layer.close(index);
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                    return false;
                }
            });
        });


    });
</script>
{/block}